<template>
	<view>
		<uni-card title="我的订单" extra="订单信息">
			<view class="dindan"v-for="(item, index) in wodedindan1" :key="index">
				<view class="time">
					<text>订单号:{{item.id}}</text>
					<text>.{{item.orderData}}</text>
				</view>
				<view >
					<view class="xinxi" v-for="subItem in item.items" :key="subItem.id">
						<view class="img">
							<image :src='subItem.goods.imgUrl' ></image>
						</view>
						<view style="width: 120px;height: 50px;margin-top: 30px;" >
							<text  class="name">{{subItem.goods.name}}</text>
						</view>
						<view style="width: 70px;height: 50px;margin-top: 30px;margin-left: 30px;" >
							<text  class="price">￥{{subItem.actulPrice}}</text>
						</view>
					</view>
				</view>
					
				<view style="display: flex;flex-direction: row;" >
					<view class="zonjia">
						<text class="price1">￥{{item.totalPrice1}}</text>
					</view>
					<view class="button3" style="margin-left: 0px;background-color: antiquewhite;">
						<button type="button">再下一单</button>
					</view>
				</view>
				<view class="beijin"></view>
			</view>
		</uni-card>
	
	</view>
</template>

<script setup>
	
	import {
		onMounted,
		ref
	} from 'vue';
	//登录后显示我的订单内容
	const wodedindan1 = ref([])
	const id1 = uni.getStorageSync("id")
	const query = ()=>{
		console.log(id1)
		uni.request({
			url: `http://wtp.qywy.cc/orders?userId=${id1.value}`,
			success: (res) => {
				wodedindan1.value = res.data
		
			}
		});
	  //   fetch(`http://localhost:3000/orders?userId=${id1.value}`,{
	  //       method:'get'
	  //   }).then(response=>response.json()).then((data)=>{
			// wodedindan1.value = data
	  //   })
	}
	onMounted(()=>{
		query()
	})
</script>

<style scoped>
	.xinxi{
		display: flex;
		flex-direction: row;
	}
	.img{
		margin-top: 20px;
		margin-left: 10px;
	}
	.xinxi image{
		width: 130px;
		height: 100px;
		border-radius: 10px;
	}
	.xinxi .name{
		font-size: 20px;
		font-weight: bold;
		color: grey;
		margin-top: 0px;
		margin-left: 10px;
	}
	.price{
		font-size: 15px;
		color: orange;
	
	}
	.zonjia{
		margin-top: 20px;
		margin-left: 30px;
		width: 150px;
	}
	.price1{
		font-size: 25px;
		color: orange;
	}
	.button3{
		margin-top: 10px;
		margin-left: 210px;
	}
	.button3 button{
		width: 100px;
		height: 45px;
		background-color: white;
	}
	.beijin{
		width: 100%;
		height: 10px;
		background-image: url('../图片/背景图片.png');
	}
	.wodedindan{
		font-size: 20px;
		margin-left: 20px;
	}
	.time text{
		color: grey;
		
	}
</style>
